import { useEffect } from "react";
import { Popconfirm, Table } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { IconDelete } from "@douyinfe/semi-icons";

import AddTesterModal from "../../components/person_manage/tester.add";

const { Column } = Table;

const Tester = () => {
    const { windowInnerHeight, remoteData } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");

    const state = useReactive({
        loading: false,
        submitLoading: false,
        industry: [],
        testers: [],
    });

    const loadOrganizationTester = async () => {
        state.loading = true;
        let res = await remoteData({
            object: "bnt-application-resource-center-service",
            serviceName: "/developer/members/getTesters",
        });

        if (Array.isArray(res) && res.length > 0) state.testers = res;
        state.loading = false;
    };

    useEffect(() => {
        loadOrganizationTester();
    }, []);

    const addTester = () => {
        setModalTitle("添加测试人员");
        setModalWidth(600);
        setModalComponent(<AddTesterModal testers={state.testers} reloadData={loadOrganizationTester} />);
        setModalVisible(true);
    };

    const deleteTester = async (r) => {
        state.submitLoading = true;
        let res = await remoteData({
            object: "bnt-application-resource-center-service",
            serviceName: "/developer/members/deleteTester",
            params: {
                miIdno: r.miIdno,
            },
        });
        if (res) loadOrganizationTester();
        state.submitLoading = false;
    };

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16 }}>组织测试人员管理</span>}
                headerExtraContent={
                    <ButtonGroup size={"default"}>
                        <Button icon={<IconPlusCircle />} onClick={addTester}></Button>
                        <Button icon={<IconRefresh />} onClick={loadOrganizationTester}></Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
            >
                <Table loading={state.loading} size="small" dataSource={state.testers} rowKey="miIdno" bordered pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
                    <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Column title="人员姓名" dataIndex="miName" align="left" />
                    <Column title="手机号码" dataIndex="miPhon" align="left" />
                    <Column title="身份证" dataIndex="miIdno" width={200} align="left" />
                    <Column
                        title="操作"
                        dataIndex="operator"
                        width={100}
                        align="center"
                        render={(_, r, i) => (
                            <Popconfirm
                                title={`确认要移除该测试人员吗?`}
                                placement="topRight"
                                okButtonProps={{ loading: state.submitLoading }}
                                onConfirm={(e) => {
                                    e.stopPropagation();
                                    deleteTester(r);
                                }}
                                onCancel={(e) => e.stopPropagation()}
                            >
                                <Button theme="borderless" icon={<IconDelete style={{ color: "#E91E63" }} />} onClick={(e) => e.stopPropagation()}></Button>
                            </Popconfirm>
                        )}
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default Tester;
